<template>
    <div class="main chat-history flex-row">
        <div class="left-his flex-column">
            <div class="table flex-item">
                <Table 
                    :columns="columns1" 
                    width="190" :data="data1" size="small" 
                    @on-row-click = "rowClick"
                    :highlight-row="highlight"></Table>
            </div>
            <div class="pages">
                <Page :total="10" :current="1"></Page>  
            </div>
        </div>
        <div class="right-his flex-item flex-column">
            <form class="info">
                <Row>
                    <Col span="10">
                        <div class="form-item">
                            <label for="">应答:</label>
                            <input type="text" :readonly="isReadOnly" >
                        </div>
                    </Col>
                    <Col span="14">
                        <div class="form-item">
                            <label for="">结束</label>
                            <input type="text" :readonly="isReadOnly">
                            <button type="button" v-show="isReadOnly" @click="isReadOnly = false">编辑</button>
                            <button type="button" @click="saveInfo" v-show="!isReadOnly">保存</button>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="10">
                        <div class="form-item">
                            <label for="">关键词:</label>
                            <input type="text" :readonly="isReadOnly">
                        </div>
                    </Col>
                    <Col span="14">
                        <div class="form-item">
                            <label for="">IP:</label>
                            <input type="text" :readonly="isReadOnly">
                            <button type="button" v-show="!isReadOnly" @click="isReadOnly = true">取消</button>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <div class="form-item">
                            <label for="">来源:</label>
                            <input type="text" :readonly="isReadOnly">
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="10">
                        <div class="form-item">
                            <label for="">主题:</label>
                            <Select v-model="formItem.model2" size="small" style="width:100px" :disabled="isReadOnly">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            <button class="small" type="button" v-show="!isReadOnly" @click="editTheme">管理</button>
                        </div>
                    </Col>
                    <Col span="14">
                        <div class="form-item">
                            <label for="">评估:</label>
                            <Select v-model="formItem.model2" size="small" style="width:190px" :disabled="isReadOnly">
                                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <div class="form-item flex-row" style="padding-right:20px;">
                            <label for="">备注:</label>
                            <input type="text" class="flex-item" :readonly="isReadOnly">
                        </div>
                    </Col>
                </Row>
            </form>
            <div class="chat flex-item">
                <Chat-List></Chat-List>
            </div>
        </div>
    </div>
</template>
<script>
import ChatList from '@/pages/index/comp/chatList'
export default {
    components: {
        ChatList
    },
    data () {
        return {
            isReadOnly: true,
            highlight: true,
            tableData1: this.mockTableData1(),
            formItem: {
                search:'',
                input: '',
                model2: ''
            },
            cityList: [
                {
                    value: 'New York',
                    label: 'New York'
                },
                {
                    value: 'London',
                    label: 'London'
                },
                {
                    value: 'Sydney',
                    label: 'Sydney'
                },
                {
                    value: 'Ottawa',
                    label: 'Ottawa'
                },
                {
                    value: 'Paris',
                    label: 'Paris'
                },
                {
                    value: 'Canberra',
                    label: 'Canberra'
                }
            ],
            columns1:[
                {   
                    title: '时间',
                    key: 'datetime',
                    align: 'center',
                },{   
                    title: '地理位置',
                    key: 'address',
                    align: 'center',
                }
            ],
            data1: [
                {
                    address: 'New York No. 1 Lake Park',
                    datetime: '07-09 11:04'
                },
                {
                    address: 'London No. 1 Lake ParkLake ParkLake Park',
                    datetime: '07-09 11:34'
                },
                {
                    address: 'Sydney No. 1 Lake Park',
                    datetime: '07-09 11:54'
                },
                {
                    address: 'Ottawa No. 2 Lake Park',
                    datetime: '2016-10-04'
                }
            ]
        }
    },
    methods: {
        changePage () {
            // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
            this.tableData1 = this.mockTableData1();
        },
        mockTableData1 () {
            let data = [];
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: 'Business' + Math.floor(Math.random () * 100 + 1),
                        status: Math.floor(Math.random () * 3 + 1),
                        portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
                        people: [
                            {
                                n: 'People' + Math.floor(Math.random () * 100 + 1),
                                c: Math.floor(Math.random () * 1000000 + 100000)
                            },
                            {
                                n: 'People' + Math.floor(Math.random () * 100 + 1),
                                c: Math.floor(Math.random () * 1000000 + 100000)
                            },
                            {
                                n: 'People' + Math.floor(Math.random () * 100 + 1),
                                c: Math.floor(Math.random () * 1000000 + 100000)
                            }
                        ],
                        time: Math.floor(Math.random () * 7 + 1),
                        update: new Date()
                    })
                }
                return data;
        },
        rowClick (data, index) {//切换数据
            console.log("data", data);
            console.log("index", index);
        },
        saveInfo () {
            this.isReadOnly = true;

        },
        editTheme () {

        }
    }
}
</script>
<style lang="scss" scoped>
.main {
    padding-bottom: 20px;
    .left-his {
        width: 195px;
        border-right: solid 1px $c_32;
        .table {
            width: 100%;
            // height: 100%;
        }
        .pages {
            width: 195px;
            height: 30px;
        }
    }

    .right-his {
        background-color: $c_14;

        .info {
            padding-left: 5px;
            padding-top: 5px;
        }
    
        .form-item {
            margin-bottom: 7px;
            height: 24px;
            line-height: 24px;

            label {
                width: 40px;
                display: inline-block;
            }
            input {
                display: inline-block;
                // border: solid 1px red;
            }
            button {
                width: 60px;
                height: 22px;
                line-height: 22px;
                border-radius: 4px;
                border: solid 1px $c_12;
                display: inline-block;

                &.small {
                    width: 34px;
                    height: 20px;
                    line-height: 20px;
                    margin-top: 2px;
                    vertical-align: top;
                }
            }
            .ivu-select {
                margin-top: -3px;
            }
        }

        .chat {
            background: $c_1;
            padding: 5px;
        }
    }
}
</style>

